<template>
    <div class="main-container">
        <levelbar></levelbar>
        <div class="form-box">
            <el-form :model="dataForm" ref="dataForm" label-width="100px" class="form" label-position='left'>
                <span class="title">广告类型与名称</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="广告类型">
                      <el-input v-model="dataForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="广告名称">
                      <el-input v-model="dataForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">广告创建时间与可见级别</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="创建时间">
                      <el-input v-model="dataForm.num1" :min="1" style="width:100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="可见级别">
                      <el-input v-model="dataForm.num1" :min="1" style="width:100%"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">广告图片</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <imgUpload @onSuccess="btnIosBigImg">
                      <div class="el-upload-new el-upload-picture-new">
                        <img v-if="dataForm.iosBigImg" :src="dataForm.iosBigImg" alt="">
                        <i v-else class="el-icon-plus"></i>
                        <input type="file" name="file" class="el-upload__input">
                      </div>
                    </imgUpload>
                  </el-col>
                </el-row>
                <span class="title">发布区域信息</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="省份">
                      <province v-model="dataForm.provinceId"></province>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="城市">
                      <city v-model="dataForm.cityId" :province="dataForm.provinceId" ></city>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="区县">
                      <region v-model="dataForm.areaId" :city="dataForm.cityId" ></region>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="man-bom"></div>
                <span class="title">审核记录</span>
                <el-row :gutter="41">
                  <el-col :span="21">
                    <el-table :data="dataForm.tableData" style="width: 100%">
                        <el-table-column prop="date" label="审核人" width="180"></el-table-column>
                        <el-table-column prop="name" label="审核时间" width="180"></el-table-column>
                        <el-table-column prop="address" label="审核状态"></el-table-column>
                        <el-table-column prop="address" label="审核描述"></el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <div class="man-bom"></div>
                <el-row :gutter="41" type="flex" justify="center">
                    <el-col :span="2"><el-button>返回</el-button></el-col>
                </el-row>
                <div class="man-bom"></div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from '../../../layout/Levelbar';
import imgUpload from 'components/Upload/fileUpload';
import province from 'components/AdvArea/province';
import city from 'components/AdvArea/city';
import region from 'components/AdvArea/region';
export default {
    name: 'getImgState',
    components: { Levelbar, imgUpload, province, city, region },
    data() {
        return {
            dataForm: {
                num1: 1,
                iosBigImg: '',
                href: '',
                content: '',
                provinceId: '',
                cityId: '',
                areaId: '',
                tableData: []
            }
        };
    },
    computed: {},
    methods: {
        btnIosBigImg(obj) {
            console.log(obj);
            this.dataForm.iosBigImg = obj.imgUrl;
        }
    }
};
</script>

<style lang="scss" scoped>
.main-container {
  position: relative;
  padding: 20px 20px 10px;
}
.form-box{
    position: relative;
    padding: 20px 30px 10px;
    background: #fff;
}
.man-bom {
  margin: 20px 0;
}
.box {
  margin: 20px 0;
}
.title {
  position: relative;
  font-size: 14px;
  color: rgb(106, 85, 72);
  padding-left: 14px;
  margin: 30px 0;
  display: block;
  &::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: 0;
    top: 4px;
  }
}
.describe {
  font-size: 14px;
  color: #666;
  margin: 20px 0;
}
i {
  font-style: normal;
  color: #999;
}
.el-upload-new {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload-picture-new {
  border-radius: 6px;
  background-color: #fbfdff;
  border: 1px dashed transparent;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  i {
    font-size: 28px;
    color: #8c939d;
  }
}
</style>